<template>
  <!-- 分享二维码邀请 -->
  <div class="invite-container">
    <h1 class="title">Promotion Sharing</h1>

    <div class="qrcode-wrapper text-center">
      <div class="qrcode flex-center">
        <!-- <img :src="qrcodeImg" alt> -->
        <qrcode tag="img" :value="qrcodeImg" :options="{ width: 200 }"/>

      </div>
    </div>

    <div class="share-wrapper">
      <div class="share">
        <h2 class="title">Share with your friends</h2>
        <div class="share-apps">
          <div class="app flex-center column" @click="onShare('facebook')">
            <i class="fa fa-facebook fa-2x"></i>
            <span>Facebook</span>
          </div>
          <div class="app flex-center column" @click="onShare('twitter')">
            <i class="fa fa-twitter fa-2x"></i>
            <span>Twitter</span>
          </div>
          <div class="app flex-center column" @click="onShare('linkedin')">
            <i class="fa fa-linkedin fa-2x"></i>
            <span>Linkedin</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Api, Login } from '@/api';
import Cookie from 'js-cookie';
import { server } from '@/api/config';
// import '@/libs/qrcode.min.js';

// declare const qrcode: any;

@Component
export default class Invite extends Vue {
  private qrcodeImg: string =
    "http://img3.imgtn.bdimg.com/it/u=570897011,3236065258&fm=26&gp=0.jpg";

  protected mounted() {
    // console.log(QRCode);
    this.getInvitationCode();
  }

  private onShare(type: string) {
    
  }


  private makeQrcode(data: string) {
    let typeNumber = 0;
    let errorCorrectionLevel = 'L';
    // let qr = qrcode(typeNumber, errorCorrectionLevel);

    // qr.addData(data);
    // qr.make();
    // return qr.createDataURL();
    
  }

  /**
   * 获取我的二维码
   */
  private async getInvitationCode() {
    const params: any = {
      ticket: Cookie.get('buyer_token'),
    };

    const { data } = await Login.getInvitationCode.r(params);
    console.log('getInvitationCode', data);
    if (data.result === 0) {
      // this.qrcodeImg = this.makeQrcode(`${window.location.href.split('#')[0]}#/Register?invitation=${data.data}`);
      this.qrcodeImg = `${window.location.href.split('#')[0]}#/Register?invitation=${data.data}`;
      // console.log(`${window.location.origin}/#/Register?invitation=${data.data}`);
      
    } else {
      this.$createDialog({
        type: 'alert',
        title: 'Attention',
        content: 'Incorrect verification code!',
        icon: 'cubeic-alert',
        confirmBtn: {
          text: 'OK',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
      }).show();
    }
  }

}
</script>

<style lang="less" scoped>
.invite-container {
  background: linear-gradient(left bottom, #ec407a, #ffd54f);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  > .title {
    font-size: 1.6rem;
    color: white;
    text-align: center;
    padding: 2rem 0;
    font-weight: bold;
  }
  .qrcode-wrapper {
    width: 100%;
    padding: 1rem 2rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    .qrcode {
      border: 1px solid white;
      border-radius: 8px;
    height: 12rem;
    line-height: 12rem;
      width: 80%;
      padding: 0.6rem 1.2rem;
      img {
        height: 9rem;
      }
    }
  }
  .share-wrapper {
    width: 100%;
    padding: 1rem 2rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    .share {
      border: 1px solid white;
      border-radius: 8px;
      width: 80%;
      padding: 0.6rem 1.2rem;
      .title {
        font-size: 1.3rem;
        color: white;
      }
      .share-apps {
        display: flex;
        justify-content: space-between;
        .app {
          height: 4rem;
          color: white;
        }
      }
    }
  }
}
</style>

